<template>
<!-- 	<view class="">
		<htmlHeadh5></htmlHeadh5>
		<htmlFooth5></htmlFooth5>
	</view> -->
	<view>
		<htmlHeadh5 class="aaz"></htmlHeadh5>
		<view class="apph5bodyt1">
			<view class="aazz">
			</view>
			<el-carousel :interval="5000"
				style="width: 100%;margin: auto;cursor: pointer;">
				<el-carousel-item v-for="(item, index) in newsType2.sytw" :key="index">
					<!-- <img @click="goDetails(item)" style="width: 100%;height: 300px;" :src="item.image1"> -->
					<img style="width: 100%;height: 300px;" :src="item.image1">
				</el-carousel-item>
			</el-carousel>
				  <view class="aazz1-1 bg-purple aazz1-1-t">
					  <view class="box-title">新闻资讯</view>
					  <img class="box-img" src="static/imgs/line.png">
					  <view class="more" @click="gomore('xwzx','xwzx2')">更多</view>
				  </view>
				  <view class="aazz1-1 bg-purple">
					  <uni-list>
					  	<uni-list-item v-for="(item, index) in newsType2.xwzx" :key="index" link
						:title="item.title.length > appxwzc?item.title.substring(0, appxwzc)+'...':item.title.substring(0, appxwzc)"
						:note="vk.pubfn.timeFormat(item._add_time,'yyyy-MM-dd')+ '---阅读'+item.ydcs"
						clickable @click="onClick(item)"
						/>
					  </uni-list>
				  </view>
				  <view class="aazz1-1 bg-purple aazz1-1-t">
					  <view class="box-title">协会文件</view>
					  <img class="box-img" src="static/imgs/line.png">
					  <view class="more" @click="gomore('xhwj','xhwj2')">更多</view>
				  </view>
				  <view class="aazz1-1 bg-purple">
					  <uni-list>
					  	<uni-list-item v-for="(item, index) in newsType2.xhwj" :key="index" link
						:title="item.title.length > appxwzc?item.title.substring(0, appxwzc)+'...':item.title.substring(0, appxwzc)"
						:note="vk.pubfn.timeFormat(item._add_time,'yyyy-MM-dd')+ '---阅读'+item.ydcs"
						clickable @click="onClick(item)"
						/>
					  </uni-list>
				  </view>
				  <view class="aazz1-1 bg-purple aazz1-1-t">
					  <view class="box-title">党建工作</view>
					  <img class="box-img" src="static/imgs/line.png">
					  <view class="more" @click="gomore('djgz','djgz2')">更多</view>
				  </view>
				  <view class="aazz1-1 bg-purple">
					  <uni-list>
					  	<uni-list-item v-for="(item, index) in newsType2.djgz" :key="index" link
						:title="item.title.length > appxwzc?item.title.substring(0, appxwzc)+'...':item.title.substring(0, appxwzc)"
						:note="vk.pubfn.timeFormat(item._add_time,'yyyy-MM-dd')+ '---阅读'+item.ydcs"
						clickable @click="onClick(item)"
						/>
					  </uni-list>
				  </view>
		</view>
		<htmlFooth5></htmlFooth5>
	</view>
</template>

<script>
	var _this;
	import htmlHeadh5 from "@/components/html/html-headh5.vue";
	import htmlFooth5 from "@/components/html/html-footh5.vue";
	var vk = uni.vk;
	export default {
		components: {
			htmlHeadh5,
			htmlFooth5
		},
		data() {
			// 页面数据变量
			return {
				options:{},
				appxwzc:25,
				newsType2:{
					xwzx: [],
					xhwj: [],
					djgz: [],
					sytw:[]
				},
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		async onLoad(options = {}) {
			vk = uni.vk;
			_this = this;
			this.options = options;
			this.getNewsListPlusApp()

		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){
			
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {
			
		},
		// 函数
		methods: {
			onClick(item){
				console.log(item)
			},
			getNewsListPlusApp() {
				// promise方式
				return vk.callFunction({
					url: 'client/hymbjy/pub/news.getNewsListPlusApp',
					data: {}
				}).then((data) => {
					for (let i = 0; i < data.list.length; i++) {
						if (data.list[i].nrtype.includes('sytw')) {
							if (this.newsType2.sytw.length < 7) {
								this.newsType2.sytw.push(data.list[i])
							}
						}
						if (data.list[i].nrtype.includes('xwzx')) {
							if (this.newsType2.xwzx.length < 7) {
								this.newsType2.xwzx.push(data.list[i])
							}
						}
						if (data.list[i].nrtype.includes('xhwj')) {
							if (this.newsType2.xhwj.length < 7) {
								this.newsType2.xhwj.push(data.list[i])
							}
						}
						if (data.list[i].nrtype.includes('djgz')) {
							if (this.newsType2.djgz.length < 7) {
								this.newsType2.djgz.push(data.list[i])
							}
						}
					}
					console.log(this.newsType2)
				}).catch((err) => {
			
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	
	.box-title {
	    display: inline-block;
	    vertical-align: -webkit-baseline-middle;
	    // font-size: .32rem;
	    color: #333;
	    font-weight: 700;
	    margin-left: 5px;
	}
	.box-img{
		height: 0.8rem;
		display: inline-block;
		vertical-align: -webkit-baseline-middle;
	}
	.more {
line-height: 5px;
    color: #666;
    position: relative;
     margin-right: 5px;
	}
	
	.aaz{
		z-index: 100;
		position: fixed;  
		width: 100%;
	}
	.aazz{
		height: 148px;
		width: 100%;
	}
	
	.aazz1{
		height: 380px;
		width: 100%;
		// background-color: khaki;
	}
	.aazz1-1{
	    //border-radius: 4px;
	    min-height: 36px;
		// background-color: khaki;
	}
	
	.aazz1-1-t{
		margin: 5px;
		    display: flex;
		    flex-direction: row;
		    flex-wrap: nowrap;
		    justify-content: space-between;
		    align-items: center;
	}
	
	.apph5bodyt1{
		min-height: 1500px;
	}
	
	
	
	
	
	
	
	
	.tt {
		width: 280px;
		height: 180px;
		margin-left: 16px;
		margin-right: 16px;
		margin-top: 10px;
		display: block;
		transition: 0.5s;
		margin-bottom: 10px;
	}

	.tt:hover {
		transform: scale(1.1);
		/* 放大到1.2倍 */
	}

	.newsp {
		line-height: 1.5;
		font-size: 16px;
		margin: 5px 0px;
	}

	.newsp:hover {
		color: #ba1c1b;
		/* 鼠标划入时的背景颜色 */
	}

	.modo {
		position: relative;
		left: 380px;
		cursor: pointer;
		font-size: 16px;
	}

	.modo:hover {
		color: #ba1c1b;
		/* 鼠标划入时的背景颜色 */
	}

	.layui-badge {
		position: relative;
		display: inline-block;
		padding: 0 6px;
		font-size: 16px;
		text-align: center;
		background-color: #ff5722;
		color: #fff;
		border-radius: 2px;
		margin-right: 10px;
		margin-left: 10px;
	}

	.layui-badge2 {
		position: relative;
		display: inline-block;
		padding: 0 6px;
		font-size: 16px;
		text-align: center;
		background-color: #bcbcbc;
		color: #fff;
		border-radius: 2px;
		margin-right: 10px;
		margin-left: 10px;

	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.horizontal-list {
		list-style-type: none;
		/* 移除默认的列表样式 */
		padding: 0;
		/* 移除默认的内边距 */
	}

	.horizontal-list li {
		display: inline-block;
		margin-right: 10px;
		/* 添加右侧外边距，用于分隔列表项 */
	}

	.uni-swiper-dot-box {
		margin: auto;
		width: 1700px;
		height: 380px;
		margin-top: 8px;
		background-color: #f5f5f5;
	}

	.swiper-box {
		width: 1700px;
		height: 380px;
	}

	.swiper-item {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 1700px;
		height: 380px;
		color: #fff;
	}

	.tddj {
		cursor: pointer;
	}

	text {
		cursor: pointer;
	}

	p {
		cursor: pointer;
	}

	.bodyt1 {
		background-color: white;
		width: 1800px;
		height: 40px;
	}

	.bodyt2 {
		margin: auto;
		background-color: #f5f5f5;
		width: 2000px;
		height: 1072px;
	}

	.bodyt2-1 {
		margin: auto;
		background-color: #f5f5f5;
		width: 1200px;
		height: 310px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: flex-start;
		align-items: stretch;
	}

	.newstype1 {
		color: #000;
		background-color: white;
		font-size: 20px;
		height: 30px;
		width: 110px;
		text-align: center;
		cursor: pointer;
		position: relative;
		margin-bottom: 40px;
	}

	.newstype1.active {
		background-color: #ba1c1b;
		/* 激活状态的背景色 */
		color: #fff;
	}

	.item {
		color: #000;
		font-size: 18px;
		text-align: center;
		height: 30px;
		width: 150px;
		padding: 10px;
		margin-bottom: 10px;
		background-color: white;
		cursor: pointer;
		position: relative;
	}

	.itemzz {
		color: #000;
		font-size: 18px;
		text-align: center;
		height: 30px;
		width: 115px;
		padding: 10px;
		margin-bottom: 10px;
		background-color: white;
		cursor: pointer;
		position: relative;
	}

	.item.active {
		background-color: #ba1c1b;
		/* 激活状态的背景色 */
		color: #fff;
	}

	.arrow {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		/* 居中显示 */
		width: 0;
		height: 0;
		border: 10px solid transparent;
		border-top-color: #ba1c1b;
		border-bottom: 0;
		border-right-color: transparent;
		border-left-color: transparent;
		margin-bottom: -10px;
		/* 稍微上移一些，让箭头紧贴着div底部 */
	}


	.bodyt2-1-1 {
		background-color: white;
		width: 450px;
		height: 300px;
		margin-right: 15px;
		border-radius: 5px;
	}

	.bodyt2-1-1-1 {
		width: 450px;
		height: 60px;
		background-color: white;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		align-items: center;
		align-content: center;
	}

	.bodyt2-1-1-1-3 {
		width: 270px;
		height: 60px;
		background-color: white;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		align-items: center;
		align-content: center;
	}

	.bodyt2-1-1-2 {
		width: 450px;
		height: 240px;
		background-color: white;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.bodyt2-1-1-3 {
		width: 270px;
		height: 240px;
		background-color: white;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}


	.bodyt2-1-2 {
		background-color: white;
		width: 450px;
		height: 360px;
		margin-right: 15px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: flex-start;
	}

	.bodyt2-1-3 {
		background-color: white;
		width: 270px;
		height: 300px;
	}

	.bodyt2-2 {
		margin: auto;
		background-color: #f5f5f5;
		width: 1200px;
		height: 240px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-evenly;
		align-items: center;
	}

	.bodyt2-2img {
		width: 290px;
		height: 130px;
	}

	.bodyt2-2-1 {
		background-color: #f5f5f5;
		width: 300px;
		height: 160px;
	}

	.bodyt2-2-2 {
		background-color: #f5f5f5;
		width: 300px;
		height: 160px;
	}

	.bodyt2-2-3 {
		background-color: #f5f5f5;
		width: 300px;
		height: 160px;
	}

	.bodyt2-2-4 {
		background-color: #f5f5f5;
		width: 300px;
		height: 160px;
	}

	.bodyt3 {
		margin: auto;
		background-color: white;
		width: 2000px;
		height: 120px;
		position: relative;
		bottom: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: flex-start;
		justify-content: flex-start;
		align-items: center;
	}

	.bodyt33 {
		margin: auto;
		width: 1200px;
		display: flex;
	}

	.bodyt3-1 {
		width: 15%;
		height: 120px;
		//background-color: #ff5722;
	}

	.bodyt3-2 {
		width: 85%;
		height: 120px;
		//background-color: burlywood;
	}

	.bodyt3-text {
		position: relative;
		margin-top: 5px;
		margin-left: 30px;
		top: 0px;
		color: grey;
	}

	.bodyt3-text:hover {
		color: #ba1c1b;
		/* 鼠标划入时的背景颜色 */
	}

	.bodyt2-2p {
		text-align: center;
	}

	a {
		text-decoration: none;
	}

	.link {
		display: inline-block;
		color: #666;
		font: 16px / 30px "微软雅黑";
		padding-right: 25px;
	}
	
	  .el-row {
	    margin-bottom: 0px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple {
	    //background: #d3dce6;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 36px;
	  }
	  .row-bg {
	    padding: 10px 0;
	    background-color: #f9fafc;
	  }
	
	
</style>